<script setup lang="ts">
import MainAppbar from "~/components/toolbar/MainAppbar.vue";
import MainSidebar from "~/components/navigation/MainSidebar.vue";
import ToolBarCenter from "~/components/toolbar/ToolBarCenter.vue";
import DrawHistory from "~/components/ai/DrawHistory.vue";
import ButtomNavigation from "~/components/navigation/ButtomNavigation.vue";

const customizeTheme = useCustomizeThemeStore();

//控制历史记录面板显示与影藏
const showHistory = useState('drawHistorySwitch', () => false)



</script>

<template>
<!--绘图历史-->
  <draw-history v-if="showHistory" v-model="showHistory"/>
<!--  顶部导航栏-->
  <tool-bar-center/>
  <!-- ---------------------------------------------- -->
  <!---MainArea -->
  <!-- ---------------------------------------------- -->
  <v-main
      v-touch="{
      left: () => (customizeTheme.mainSidebar = false),
      right: () => (customizeTheme.mainSidebar = true),
    }"
      class="main-container"
  >
    <!-- <GlobalLoading /> -->

<!--    <div class="d-none d-sm-block px-3">-->
<!--      <Breadcrumb></Breadcrumb>-->
<!--    </div>-->

    <div class="flex-fill">
      <slot></slot>
    </div>

  </v-main>
<!--  <buttom-navigation style="position:absolute;bottom:0;"/>-->

</template>

<style scoped>
.scrollnav {
  height: calc(100vh - 326px);
}

.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
